Support retina displays #25
Conversation
2. add parameter to skip iPads from style adjustments 3. add propagation of utility functions to a global window scope object
|
Can I ask what the onus is for testing retina in JS? It seems like this would be better handled in a CSS media query. (Since any browsers that run on retina are also able to understand media queries.) |
|
The whole idea of using adaptjs itself is separation of css files, clear and done once. So that desktop and mobile resources get only minor intersections. Now high dpi displays break that concept almost totally as the report high width values to js. In other words, if I want to have 2 totally different css files for mobile and desktop and retina I would use classical media query based aproach I would have to inline retina styles into desktop css, which is not the best choice,as device itself is mobile. So i've added retina/high dpi detection to core adapt, so that media queries are still in mobile css files, which is logically correct (except for retina mac pros, but this can be filtered by backend). |
|
This isn't correct: "Now high dpi displays break that concept almost totally as the report high width values to js." Here are screenshots taken at double pixel density (on a retina MacBook Pro) and an external (non-retina) monitor. RETINA NON-RETINA In both cases, the browser reports 1171px (just the arbitrary width I had it at) when checking against A "CSS pixel" is not a 1:1 physical screen pixel. The width is reported consistently, whether or not a screen is "retina" density. Really, unless anyone has to support IE8 (or browsers that don't understand media queries), there's really no reason to use Adapt.js anymore. It's solves a problem that is less and less relevant (same code for IE8 as for modern browsers). In fact, I'd recommend this approach instead of using Adapt.js nowadays… |
|
Ok, thanks for the article. But that's approach of enhancing existing css base with additional styles. I'll think again if that's an option in my case, as what I have right now is not the most beautiful thing :) But, I clearly remember moment of iphone or latest ipod reporting me screen width of 980px, will be able to check that only tomorrow, may be it was my left hand bogous coding at the moment. On the other hand even if the thing is submiting high value of a screen, I admit that it's a poor excuse to have badly structured css itself, which is not suitable for enhancement. |
|
If it's reporting the actual pixel width, that's likely because a viewport meta tag wasn't found… Adding that will force the browser to report the width in "CSS pixels" instead of on-screen DPI. |
|
viewport was in code for sure, now that you've quoted it like that I wonder if it was in head section or not. In any case, will check it all tomorrow, thanks for tips. |
The minified version of code is not here, please ping me if you'd like me to create one.